<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<!--移动端预览-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博客详情</title>
<link rel="stylesheet" href="../static/css/semantic.min.css"
	th:href="@{/css/semantic.min.css}">
<!--引入页面排版CSS-->
<link rel="stylesheet" href="../static/css/typo.css"
	th:href="@{/css/typo.css}">
<!--引入动画插件CSS-->
<link rel="stylesheet" href="../static/css/animate.css"
	th:href="@{/css/animate.css}">
<!--引入代码高亮插件CSS-->
<link rel="stylesheet" href="../static/lib/prism/prism.css"
	th:href="@{/lib/prism/prism.css}">
<!--引入目录生成插件CSS-->
<link rel="stylesheet" href="../static/lib/tocbot/tocbot.css"
	th:href="@{/lib/tocbot/tocbot.css}">
<!--引入自定义CSS-->
<link rel="stylesheet" href="../static/css/me.css"
	th:href="@{/css/me.css}">
<link rel="stylesheet" type="text/css"
	th:href="@{/assets/waifu.css?v=1.4.2}" />
</head>
<body>
	<!--导航-->
	<nav
		class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small"
		th:replace="_fragments :: menu(6)">
		<div class="ui container">
			<div class="ui inverted secondary stackable menu">
				<h2 class="ui teal header item">Bolg</h2>
				<a href="#" class="m-item item m-mobile-hide active"><i
					class="small home icon"></i>首页</a> <a href="#"
					class="m-item item m-mobile-hide"><i class="small idea icon"></i>分类</a>
				<a href="#" class="m-item item m-mobile-hide"><i
					class="small tags icon"></i>标签</a> <a href="#"
					class="m-item item m-mobile-hide"><i class="small idea icon"></i>关于我</a>
				<div class="right m-item item m-mobile-hide">
					<form name="search" action="" target="_blank" method="post">
						<div class="ui icon inverted  input">
							<input type="text" name="query" placeholder="Search.."> <i
								class="search icon link"></i>
						</div>
					</form>
				</div>
			</div>
		</div>
		<!--menu toggle无任何显示意思-->
		<a href="#"
			class="ui icon menu toggle black button m-right-top m-mobile-show">
			<i class="sidebar icon"></i>
		</a>
	</nav>
	<!--导航 end-->

	<!--中间内容 start-->
	<div id="waypoint"
		class="m-container-small m-padded-tb-big animated fadeIn">
		<div class="ui container">
			<!--提交留言表单-->
			 <input type="hidden" name="parentConmmentId" value="-1" readonly="readonly">
			<div id="comment-form" class="ui form">
				<div class="field">
					<textarea name="content" rows="3" placeholder="请输入评论信息"></textarea>
				</div>
				<div class="fields">
					<div class="field m-mobile-wide m-margin-bottom-small">
						<div class="ui left icon input">
							<i class="user icon"></i> <input name="nickname" type="text"
								placeholder="昵称" >
						</div>
					</div>
					<div class="field m-mobile-wide m-margin-bottom-small">
						<div class="ui left icon input">
							<i class="mail icon"></i> <input name="email" type="email"
								placeholder="邮箱" readonly="readonly" value="123@qq.com">
						</div>
					</div>
					<div class="field m-margin-bottom-small m-mobile-wide">
						<button id="commentpost-btn" type="button"
							class="ui teal button m-mobile-wide">
							<i class="edit icon"></i>发布
						</button>
					</div>
				</div>
				<!--表单校验-->
				<!--错误提示-->
				<div class="ui error message"></div>
			</div>
			<!--提交留言表单-->
			<!-- 网页留言 -->
			<div id="conmment-container" class="ui bottom attached segment">
				<!--留言区域列表-->
				<div id="comment-container" class="ui teal segment">
					<div th:fragment="leaveCommentsList">
						<div class="ui threaded comments" style="max-width: 100%">
							<h3 class="ui dividing header">留言</h3>
							<div class="comment" th:each="lm:${leaveComments}"  th:if="${#arrays.length(leaveComments)}>0">
								<a class="avatar"> <img th:src="@{${lm.avatar}}">
								</a>
								<div class="content">
									<a class="author">
										<span th:text="${lm.name}">Matt</span>
										<div class="ui mini basic teal left pointing label m-padded-mini" th:if="${lm.adminComment}">博主</div>
									</a>
									<div class="metadata">
										<span class="date" th:text="${#dates.format(lm.createTime,'yyyy-MM-dd HH:mm')}">2020-10-1</span>
									</div>
									<div class="text" th:text="${lm.content}">你的博客真棒！</div>
									<div class="actions">
										<a class="回复" th:attr="data-commentid=${lm.id},data-commentnickname=${lm.name}" data-commentid="1" data-commentnickname="Matt"  onclick="reply(this)">回复</a>
                                    	<a style="display: none;" onclick="cancelReply(this)" class="meHide">取消</a>
									</div>
								</div>
							     <!--判断是否有子集回复-->
                                <div class="comments" th:if="${#arrays.length(lm.replyComments)}>0">                           
                              		  <div class="comment" th:each="childLm : ${lm.replyComments}">
                                       <a class="avatar"><img th:src="@{${childLm.avatar}}"></a>
                                        <div class="content">
                                            <a class="author" >
                                               <span th:text="${childLm.name}">小白</span>&nbsp;
                                              	<div th:if="${childLm.adminComment}" class="ui mini basic teal left pointing label m-padded-mini">博主</div>
                                                <span th:text="' @' + ${childLm.parentConmment.name}" class="m-teal">@ 小红</span>
                                                <div th:if="${childLm.adminComment}" class="ui mini basic teal left pointing label m-padded-mini">博主</div>
                                            </a>
                                            <div class="metadata"> 
                                             	 <span th:text="${#dates.format(childLm.createTime,'yyyy-MM-dd HH:mm')}" class="date" >Today at 5:42PM</span>
                                            </div>
                                            <div th:text="${childLm.content}" class="text" > 你好呀</div>
                                            <div class="actions">
                                                 <a class="回复"  th:attr="data-commentid=${childLm.id},data-commentnickname=${childLm.name}" data-commentid="1" data-commentnickname="Matt"  onclick="reply(this)">回复</a>
                                   			  <a style="display: none;" onclick="cancelReply(this)" class="meHide">取消</a>
                                            </div>
                                       </div>
                                   </div>
                                </div>
                                </div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 网页留言 -->
		</div>
	<!--中间内容 start-->
	
	
	
	<!--底部footer start-->

	<footer class="ui inverted vertical segment m-padded-tb-massive"
		th:replace="_fragments :: footer">
		<div class="ui center aligned container">
			<div class="ui inverted divided stackable grid">
				<div class="three wide column">
					<div class="ui inverted link list">
						<h4 class="ui inverted header m-opacity-min">站长微信</h4>
						<div class="item">
							<img th:src="@{/images/loginTX.png}"
								src="../static/images/loginTX.png" CLASS="ui rounded image"
								alt="" style="width: 110px">
						</div>
					</div>
				</div>
				<div class="three wide column">
					<h4 class="ui inverted header m-opacity-min">最新博客</h4>
					<div class="ui inverted link list">
						<a href="#" class="item">2019一年收获总结</a> <a href="#" class="item">idea的操作笔记</a>
						<a href="#" class="item">SpringBoot学习计划</a>
					</div>
				</div>
				<div class="three wide column">
					<h4 class="ui inverted header m-opacity-min">联系作者</h4>
					<div class="ui inverted link list">
						<a href="https://space.bilibili.com/393270022" class="item">b站</a>
						<a href="#" class="item">QQ:1515177029</a> <a href="#"
							class="item">邮箱:yerenping@aliyun.com</a>
					</div>
				</div>
				<div class="seven wide column">
					<h4 class="ui inverted header m-opacity-min">关于作者</h4>
					<p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
				</div>
			</div>
			<!--分割线-->
			<div class="ui inverted section divider"></div>
			<p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 -
				2020 作者:小小叶儿 此站仅供个人所有 如有疑问联系作者</p>
		</div>
	</footer>
	<!--底部footer end-->
	<!-- 妹子的body -->
	<div th:insert="_mz :: body"></div>
</body>
<!--引入jQuery-->
<script src="../static/js/jquery-3.4.1.min.js"
	th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script src="../static/js/semantic.min.js"
	th:src="@{/js/semantic.min.js}"></script>
<!--引入waypoints插件滚动条-->
<script src="../static/lib/waypoints/jquery.waypoints.min.js"
	th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
<!--引入平滑滚动插件CDN-->
<script src="../static/js/jquery.scrollTo.min.js"
	th:src="@{/js/jquery.scrollTo.min.js}"></script>
<!--引入canvas -->
<th:block th:insert="_fragments ::  canvas"></th:block>
<!-- waifu-tips.js 依赖 JQuery 库 -->
<!-- 实现拖动效果，需引入 JQuery UI -->
<script type="text/javascript">
	/* 把 autoload.js 内容直接内置 */
	$.ajax({
		url : '/assets/waifu-tips.js?v=1.4.2',
		dataType : "script",
		cache : true,
		async : false
	});
	$.ajax({
		url : '/assets/live2d.min.js?v=1.0.5',
		dataType : "script",
		cache : true,
		async : false
	});

	/* 可直接修改部分参数 */
	live2d_settings['hitokotoAPI'] = 'jinrishici.com'; // 一言 API
	live2d_settings['modelId'] = 6; // 默认模型 ID
	live2d_settings['modelTexturesId'] = 18; // 默认材质 ID
	live2d_settings['modelStorage'] = false; // 不储存模型 ID
	live2d_settings['canCloseLive2d'] = true; // 隐藏 关闭看板娘 按钮
	live2d_settings['canTurnToHomePage'] = true; // 隐藏 返回首页 按钮
	live2d_settings['waifuSize'] = '400x350'; // 看板娘大小
	live2d_settings['waifuTipsSize'] = '280x60'; // 提示框大小
	live2d_settings['waifuFontSize'] = '16px'; // 提示框字体
	live2d_settings['waifuEdgeSide'] = 'left:0'; // 看板娘贴边方向
	live2d_settings['waifuToolFont'] = '16px'; // 工具栏字体
	live2d_settings['waifuToolLine'] = '20px'; // 工具栏行高
	live2d_settings['waifuToolTop'] = '-34px'; // 工具栏顶部边距
	live2d_settings['waifuDraggable'] = 'unlimited'; // 拖拽样式

	/* 内置 waifu-tips.json */
	initModel({
		"waifu" : {
			"console_open_msg" : [ "哈哈，你打开了控制台，是想要看看我的秘密吗？" ],
			"copy_message" : [ "你都复制了些什么呀，转载要记得加上出处哦" ],
			"screenshot_message" : [ "照好了嘛，是不是很可爱呢？" ],
			"hidden_message" : [ "我们还能再见面的吧…" ],
			"load_rand_textures" : [ "我还没有其他衣服呢", "我的新衣服好看嘛" ],
			"hour_tips" : {
				"t5-7" : [ "早上好！一日之计在于晨，美好的一天就要开始了" ],
				"t7-11" : [ "上午好！工作顺利嘛，不要久坐，多起来走动走动哦！" ],
				"t11-14" : [ "中午了，工作了一个上午，现在是午餐时间！" ],
				"t14-17" : [ "午后很容易犯困呢，今天的运动目标完成了吗？" ],
				"t17-19" : [ "傍晚了！窗外夕阳的景色很美丽呢，最美不过夕阳红~" ],
				"t19-21" : [ "晚上好，今天过得怎么样？" ],
				"t21-23" : [ "已经这么晚了呀，早点休息吧，晚安~" ],
				"t23-5" : [ "你是夜猫子呀？这么晚还不睡觉，明天起的来嘛" ],
				"default" : [ "嗨~ 快来逗我玩吧！" ]
			},
			"referrer_message" : {
				"localhost" : [ "欢迎阅读<span style=\"color:#0099cc;\">『",
						"』</span>", " - " ],
				"baidu" : [
						"Hello! 来自 百度搜索 的朋友<br>你是搜索 <span style=\"color:#0099cc;\">",
						"</span> 找到的我吗？" ],
				"so" : [
						"Hello! 来自 360搜索 的朋友<br>你是搜索 <span style=\"color:#0099cc;\">",
						"</span> 找到的我吗？" ],
				"google" : [
						"Hello! 来自 谷歌搜索 的朋友<br>欢迎阅读<span style=\"color:#0099cc;\">『",
						"』</span>", " - " ],
				"default" : [ "Hello! 来自 <span style=\"color:#0099cc;\">",
						"</span> 的朋友" ],
				"none" : [ "欢迎阅读<span style=\"color:#0099cc;\">『", "』</span>",
						" - " ]
			},
			"referrer_hostname" : {
				"example.com" : [ "示例网站" ],
				"www.fghrsh.net" : [ "FGHRSH 的博客" ]
			},
			"model_message" : {
				"1" : [ "来自 Potion Maker 的 Pio 酱 ~" ],
				"2" : [ "来自 Potion Maker 的 Tia 酱 ~" ]
			},
			"hitokoto_api_message" : {
				"lwl12.com" : [
						"这句一言来自 <span style=\"color:#0099cc;\">『{source}』</span>",
						"，是 <span style=\"color:#0099cc;\">{creator}</span> 投稿的",
						"。" ],
				"fghrsh.net" : [ "这句一言出处是 <span style=\"color:#0099cc;\">『{source}』</span>，是 < span style =\"color:#0099cc;\">FGHRSH</> 在 {date} 收藏的！" ],
				"jinrishici.com" : [ "这句诗词出自 <span style=\"color:#0099cc;\">《{title}》</span>，是 {dynasty}诗人 {author} 创作的！" ],
				"hitokoto.cn" : [ "这句一言来自 <span style=\"color:#0099cc;\">『{source}』</span>，是 <span style=\"color:#0099cc;\">{creator}</span> 在 hitokoto.cn 投稿的。" ]
			}
		},
		"mouseover" : [ {
			"selector" : ".container a[href^='http']",
			"text" : [ "要看看 <span style=\"color:#0099cc;\">{text}</span> 么？" ]
		}, {
			"selector" : ".fui-home",
			"text" : [ "点击前往首页，想回到上一页可以使用浏览器的后退功能哦" ]
		}, {
			"selector" : ".fui-chat",
			"text" : [ "欢迎小哥哥，━(*｀∀´*)ノ亻!" ]
		}, {
			"selector" : ".fui-eye",
			"text" : [ "嗯··· 要切换 看板娘 吗？" ]
		}, {
			"selector" : ".fui-user",
			"text" : [ "喜欢换装 Play 吗？" ]
		}, {
			"selector" : ".fui-photo",
			"text" : [ "要拍张纪念照片吗？" ]
		}, {
			"selector" : ".fui-info-circle",
			"text" : [ "这里有关于我的信息呢" ]
		}, {
			"selector" : ".fui-cross",
			"text" : [ "你不喜欢我了吗..." ]
		}, {
			"selector" : "#tor_show",
			"text" : [ "翻页比较麻烦吗，点击可以显示这篇文章的目录呢" ]
		}, {
			"selector" : "#comment_go",
			"text" : [ "想要去评论些什么吗？" ]
		}, {
			"selector" : "#night_mode",
			"text" : [ "深夜时要爱护眼睛呀" ]
		}, {
			"selector" : "#qrcode",
			"text" : [ "手机扫一下就能继续看，很方便呢" ]
		}, {
			"selector" : ".comment_reply",
			"text" : [ "要吐槽些什么呢" ]
		}, {
			"selector" : "#back-to-top",
			"text" : [ "回到开始的地方吧" ]
		}, {
			"selector" : "#author",
			"text" : [ "该怎么称呼你呢" ]
		}, {
			"selector" : "#mail",
			"text" : [ "留下你的邮箱，不然就是无头像人士了" ]
		}, {
			"selector" : "#url",
			"text" : [ "你的家在哪里呢，好让我去参观参观" ]
		}, {
			"selector" : "#textarea",
			"text" : [ "认真填写哦，垃圾评论是禁止事项" ]
		}, {
			"selector" : ".OwO-logo",
			"text" : [ "要插入一个表情吗" ]
		}, {
			"selector" : "#csubmit",
			"text" : [ "要[提交]^(Commit)了吗，首次评论需要审核，请耐心等待~" ]
		}, {
			"selector" : ".ImageBox",
			"text" : [ "点击图片可以放大呢" ]
		}, {
			"selector" : "input[name=s]",
			"text" : [ "找不到想看的内容？搜索看看吧" ]
		}, {
			"selector" : ".previous",
			"text" : [ "去上一页看看吧" ]
		}, {
			"selector" : ".next",
			"text" : [ "去下一页看看吧" ]
		}, {
			"selector" : ".dropdown-toggle",
			"text" : [ "这里是菜单" ]
		}, {
			"selector" : "c-player a.play-icon",
			"text" : [ "想要听点音乐吗" ]
		}, {
			"selector" : "c-player div.time",
			"text" : [ "在这里可以调整<span style=\"color:#0099cc;\">播放进度</span>呢" ]
		}, {
			"selector" : "c-player div.volume",
			"text" : [ "在这里可以调整<span style=\"color:#0099cc;\">音量</span>呢" ]
		}, {
			"selector" : "c-player div.list-button",
			"text" : [ "<span style=\"color:#0099cc;\">播放列表</span>里都有什么呢" ]
		}, {
			"selector" : "c-player div.lyric-button",
			"text" : [ "有<span style=\"color:#0099cc;\">歌词</span>的话就能跟着一起唱呢" ]
		}, {
			"selector" : ".waifu #live2d",
			"text" : [ "干嘛呢你，快把手拿开", "鼠…鼠标放错地方了！" ]
		} ],
		"click" : [ {
			"selector" : ".waifu #live2d",
			"text" : [ "是…是不小心碰到了吧", "萝莉控是什么呀", "你看到我的小熊了吗",
					"再摸的话我可要报警了！⌇●﹏●⌇", "110吗，这里有个变态一直在摸我(ó﹏ò｡)",
					"坏人，不要在碰我了呀 [○･｀Д´･ ○]" ]
		} ],
		"seasons" : [
				{
					"date" : "01/01",
					"text" : [ "<span style=\"color:#0099cc;\">元旦</span>了呢，新的一年又开始了，今年是{year}年~" ]
				},
				{
					"date" : "02/14",
					"text" : [ "又是一年<span style=\"color:#0099cc;\">情人节</span>，{year}年找到对象了嘛~" ]
				},
				{
					"date" : "03/08",
					"text" : [ "今天是<span style=\"color:#0099cc;\">妇女节</span>！" ]
				},
				{
					"date" : "03/12",
					"text" : [ "今天是<span style=\"color:#0099cc;\">植树节</span>，要保护环境呀" ]
				},
				{
					"date" : "04/01",
					"text" : [ "悄悄告诉你一个秘密~<span style=\"background-color:#34495e;\">今天是愚人节，不要被骗了哦~</span>" ]
				},
				{
					"date" : "05/01",
					"text" : [ "今天是<span style=\"color:#0099cc;\">五一劳动节</span>，计划好假期去哪里了吗~" ]
				},
				{
					"date" : "06/01",
					"text" : [ "<span style=\"color:#0099cc;\">儿童节</span>了呢，快活的时光总是短暂，要是永远长不大该多好啊…" ]
				},
				{
					"date" : "09/03",
					"text" : [ "<span style=\"color:#0099cc;\">中国人民抗日战争胜利纪念日</span>，铭记历史、缅怀先烈、珍爱和平、开创未来。" ]
				},
				{
					"date" : "09/10",
					"text" : [ "<span style=\"color:#0099cc;\">教师节</span>，在学校要给老师问声好呀~" ]
				},
				{
					"date" : "10/01",
					"text" : [ "<span style=\"color:#0099cc;\">国庆节</span>，新中国已经成立69年了呢" ]
				},
				{
					"date" : "11/05-11/12",
					"text" : [ "今年的<span style=\"color:#0099cc;\">双十一</span>是和谁一起过的呢~" ]
				},
				{
					"date" : "12/20-12/31",
					"text" : [ "这几天是<span style=\"color:#0099cc;\">圣诞节</span>，主人肯定又去剁手买买买了~" ]
				} ]
	});
</script>
<script>
	/*小屏幕 下拉的图标*/
	$('.menu.toggle').click(function() {
		$('.m-item').toggleClass('m-mobile-hide');
	});

	/*平滑滚动*/
	$('#toTop').click(function() {
		/*0-500毫秒*/
		$(window).scrollTo(0, 500); //0 顶部距离
	});

	/*waypoint滚动条位置设置  滚动侦测*/
	var waypoint = new Waypoint({
		element : document.getElementById('waypoint'),
		handler : function(direction) {//direction方向
			if (direction == 'down') {
				$('#toolbar').show(300);
			} else {
				$('#toolbar').hide(500);
			}
		}
	})

	//评论表单验证
	$('.ui.form').form({
		fields : {
			title : {
				identifier : 'content',
				rules : [ {
					type : 'empty',
					prompt : '请输入评论内容！'
				} ]
			},
			content : {
				identifier : 'nickname',
				rules : [ {
					type : 'empty',
					prompt : '请输入你的大名！'
				} ]
			},
			type : {
				identifier : 'email',
				rules : [ {
					type : 'empty',
					prompt : '请输入正确的邮箱地址！'
				} ]
			}
		}
	});

	$('#commentpost-btn').click(function() {
		var boo = $('.ui .form').form('validate form');
		if (boo) {
			console.log('校验成功');
			postData();
			//将信息提交到后台
		} else {
			console.log('校验失败');
		}
	});

	function postData() {
		$("#comment-container").load("[[@{/postGetLeaveComment}]]", {
			"parentConmmentId" : $("[name='parentConmmentId']").val(),
			"name" : $("[name='nickname']").val(),
			"email" : $("[name='email']").val(),
			"content" : $("[name='content']").val()
		}, function(responseTxt, statusTxt, xhr) {
			//滚动到指定位置
			$(window).scrollTo($('#comment-container'), 500);
			//清除文本域数据且更改父id
			clearContent();
		});
	}

	function clearContent() {
		$("[name='parentConmmentId']").val('-1');
		$("[name='content']").val('');
		$("[name='nickname']").val('');
		$("[name='content']").attr("placeholder", "请输入评论信息...");
	}

	//失去焦点 默认评论没有父级
	$("[name='content']").blur(function() {
		$("[name='content']").attr("placeholder", "请输入评论信息");
	})
	//回复
	function reply(obj) {
		$(".meHide").hide();
	    var commentId = $(obj).data('commentid');
	    var commentNickname = $(obj).data('commentnickname');
	    $("[name='content']").attr("placeholder","@"+commentNickname).focus();
	    $("[name='parentConmmentId']").val(commentId)
	    //滚动到指定位置
	    $(window).scrollTo($('#comment-form'),500);
	    //显示取消
	    $(obj).next().show();
	}
	//取消回复
	function cancelReply(obj) {
		$(obj).hide();
		$("[name='parentConmmentId']").val('-1');
		$("[name='content']").attr("placeholder","请输入评论信息...");
	}
</script>
</html>